<script lang="ts">
import {defineComponent, onMounted,reactive} from 'vue'
import * as echarts from 'echarts';
import {useUserStore} from "@/store/app.ts";
export default defineComponent({
  name: "BarCharts",
  setup() {
    const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    })

    const onSubmit = () => {
      console.log('submit!')
    }
    const user = useUserStore()
    onMounted(()=>{
      const myEcharts =  echarts.init(document.getElementById('ECharts'))
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      // 绘制图表
      myEcharts.setOption(option)
    })
    return {form,onSubmit}
  }
})
</script>

<template>
  <h1>LineCharts-折线图</h1>

  <div id="ECharts" style="width: 100%;height: 600px"></div>

  <el-form :model="form" label-width="80px" class="info-form">
    <el-form-item label="姓名">
<!--      <span slot="label" style="text-align: center">姓名</span>-->
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="收件人">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="收件地址">
      <el-input v-model="form.name" />
    </el-form-item>
  </el-form>
</template>

<style scoped>
 /deep/ .el-form-item label:after {
  content: "";
  width: 100%;
}
 /deep/ .el-form-item__label {
  display: inline-block;
  height: 30px;
  text-align: justify;
  text-align-last: justify;
}
/* 这里去除必选字段的*,这个符号会造成一定影响,去掉之后我用了li列表进行定位,在前面加上" * ". */
 /deep/ .el-form-item.is-required .el-form-item__label:before {
  content: none !important;
}

</style>
